<template>
  <div class="classcenter">
    <Home_header :settings="config.setting" :showtop="false"></Home_header>
    <div v-for="(item,index) in headerBanner.data" class="banners">
       <a :href="item.link" target="_blank"><img :src="item.image" alt/></a>
    </div>
    <!-- <div>{{counselingBanner}}</div> -->
    <!-- <div>{{schoolprogrammes}}</div> -->
    <div class="am_container">
      <h2>名校 MBA 面试方案</h2>
      <div class="swiper-container swiperone" v-swiper:mySwipernm="swiperopeen">
        <div class="swiper-wrapper">
          <div v-for="(item,index) in schoolprogrammes.data" class="swiper-slide">
            <div class="swpt_im">
              <img :src="item.image" alt/>
            </div>
            <div class="mba_top">
              <p class="pones">{{item.name}}</p>
              <p class="ponew">{{item.description}}</p>
            </div>
            <div class="getClass">
              <p>面试时间：{{item.test_time}}</p>
              <p>地址：{{item.address}}</p>
              <p>复试分数线：{{item.score_line}}</p>
            </div>
            <div>
              <nuxt-link class="go_jj"
                         :to="{path:'newsdetail',query:{id:item.id,anchor:'复试方案',apipath:'schoolprogrammes',detailpath:'schoolprogrammedetail'}}">
                查看详情
              </nuxt-link>
            </div>
          </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <div class="am_container am_contwo">
      <h2>MBA 面试辅导课程</h2>
      <h5>华章面试 为您录取护航</h5>
      <span class="step">STEP1</span>
      <span class="stes">MBA面试实战</span>
      <div class="box_hid">
        <div v-for="(item,index) in mianshi" class="step_s">
          <div class="png_ff">
            <img :src="item.url" alt/>
          </div>
          <p>{{item.name}}</p>
          <p>{{item.professional}}</p>
        </div>
      </div>
      <span class="step">STEP1</span>
      <span class="stes">MBA面试实战</span>
      <div class="guide">
        <div v-for="(item,index) in mianshi" class="guide_con">
          <div class="mian_zhi">
            <p>面试官指导</p>
          </div>
          <div class="penss_con">
            <img :src="item.imgurl" alt/>
          </div>
          <p>{{item.conten}}</p>
          <p>{{item.Interpretation}}</p>
        </div>
      </div>
    </div>
    <div class="setup">
      <h2>MBA 面试课程设置</h2>
      <div class="tables">
        <table class="am-table am-margin-vertical-lg interview-class-table am-table-bordered">
          <thead>
          <tr>
            <th class="am-text-lg">课程</th>
            <th class="am-text-lg">课程内容</th>
            <th class="am-text-lg">课程介绍</th>
          </tr>
          </thead>
          <tbody v-for="(item,index) in tables.data">
          <tr v-for="(array,index) in item.content">
            <td style="background:#c0504d;color:#fff" class="am-text-lg">{{item.name}}</td>
            <td class>{{array.content}}</td>
            <td class>{{array.description}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="gost_c">
      <h2>MBA 面试辅导热门班型</h2>
      <div v-for="(item,inde) in classType.data" class="gost_img">
        <img :src="item.image" alt/>
      </div>
    </div>
    <div class="squad">
      <h2>面试师资阵容</h2>
      <div class="squad_con">
        <div v-for="(item,index) in interviewTeacher.data" class="squad_one">
          <a href="javascript:;">
            <div class="bfa_bao">
              <img :src="item.image" alt/>
            </div>
            <p>{{item.name}} {{item.title}}</p>
            <p>{{item.description}}</p>
          </a>
        </div>
      </div>
      <div class="appointment">
        <a target="_blank" href="http://p.qiao.baidu.com/cps/chat?siteId=11408431&userId=24620165">预约试听</a>
      </div>
      <div class="student">
        <h2>华章复试录取学员</h2>
        <div class="stden_con">
          <div class="swiper-container swipertwo" v-swiper:mySwiper2="swipertwo">
            <div class="swiper-wrapper">
              <div v-for="(item,index) in studentfu.data" class="swiper-slide swipersx">
                <div class="boy_left">
                  <img :src="item.image" alt/>
                </div>
                <div class="nei_con">
                  <p>姓名：{{item.name}}</p>
                  <p>录取院校：{{item.school}}</p>
                </div>
              </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>
      <div class="more">
        <div class="more_con">
          <p>更多内容</p>
        </div>
        <div class="more_vnm">
          <div class="swiper-container swipertwo" v-swiper:mySwipertuee="swiperstree">
            <div class="swiper-wrapper">
              <div v-for="(item,index) in moreBanner.data" class="swiper-slide img_mnb">
                <a id="box_bao" target="_blank" :href="item.link">
                  <img :src="item.image" alt="">
                </a>
              </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import contentone from '../../assets/img/23.png'
    import contentwo from '../../assets/img/cons2.png'
    import contentsan from '../../assets/img/cons3.png'
    import contentsi from '../../assets/img/cons4.png'
    import contentwu from '../../assets/img/cons5.png'
    import urlone from '../../assets/img/penss.png'
    import urltwo from '../../assets/img/url1.png'
    import urlsan from '../../assets/img/url2.png'
    import urlsi from '../../assets/img/url3.png'
    import urlwu from '../../assets/img/url4.png'
    import Home_header from "../../components/Home-header";

    export default {
        name: "classcenter",
        components: {
            Home_header
        },
        async asyncData({app}) {
            let config = await app.$apiconfig();
            //内页banner
            let counselingBanner = await app.$apiGet('bannercategories')
            //面试页面上bannner
            let headerBanner = await app.$apiGet('banners', {cate_id: 17})
            //热门班型
            let classType = await app.$apiGet('banners', {cate_id: 18})
            //更多类型
            let moreBanner = await app.$apiGet('banners', {cate_id: 1})
            //复试学生列表
            let studentfu = await app.$apiGet('reexamstudents',{limit:1000})
            //面试导师
            let interviewTeacher = await app.$apiGet('experts', {location: 2, limit: 4})
            //高校方案
            let schoolprogrammes = await app.$apiGet('schoolprogrammes')
            //MBA复试课程表格
            let tables = await app.$apiGet('mbacourses', {location: 2})

            return {
                swiperopeen: {
                    slidesPerView: 4,
                    spaceBetween: 0,
                    pagination: {
                        el: ".swiper-pagination",
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                },
                tables,
                config,
                schoolprogrammes: schoolprogrammes,
                interviewTeacher: interviewTeacher,
                studentfu: studentfu,
                moreBanner: moreBanner,
                headerBanner: headerBanner,
                classType: classType,
                counselingBanner: counselingBanner,
            }
        },
        data() {
            return {
                mianshi: [
                    {
                        name: '名校MBA面试',
                        professional: '政策解析',
                        conten: 'MBA面试官',
                        Interpretation: '全面讲解面试方法',
                        url: contentone,
                        imgurl: urlone,
                    },
                    {
                        name: '一对一',
                        professional: '个人面试实践',
                        conten: 'MBA面试前批次',
                        Interpretation: '分享面试经验',
                        url: contentwo,
                        imgurl: urltwo,
                    },
                    {
                        name: '无领导小组',
                        professional: '面试实践',
                        conten: '模拟面试培养',
                        Interpretation: '临场发挥',
                        url: contentsan,
                        imgurl: urlsan,
                    },
                    {
                        name: '一对一',
                        professional: '压力面试实践',
                        conten: '针对面试问题',
                        Interpretation: '逐渐矫正',
                        url: contentsi,
                        imgurl: urlsi,
                    },
                    {
                        name: '一对一',
                        professional: '英语面试实践',
                        conten: '面临状态调整',
                        Interpretation: '临考状态',
                        url: contentwu,
                        imgurl: urlwu,
                    },
                ],

                swipertwo: {
                    slidesPerView: 3,
                    spaceBetween: 0,
                    slidesPerGroup: 3,
                    loop: true,
                    loopFillGroupWithBlank: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                },
                swiperstree: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                    slidesPerGroup: 1,
                    loop: true,
                    loopFillGroupWithBlank: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                },
            };
        },
        head() {
            return this.config.header;
        },
        created() {
            console.log(this.counselingBanner)
        },
    };
</script>

<style scoped>
  .img_mnb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .img_mnb {
    padding: 5px;
    box-sizing: border-box;
    height: 300px;
  }

  .more_vnm {
    width: 1200px;
    margin: auto;
    margin-bottom: 25px;
  }

  .more_con p {
    font-size: 18px;
    margin-top: 30px;
  }

  .swipertwo {
    height: auto;
    padding-bottom: 10px;
    border-bottom: 1px dashed #d5d5d5;
  }

  .nei_con p {
    font-size: 16px;
  }

  .nei_con:hover p {
    color: #fff;
  }

  .nei_con:hover {
    background: #c00000;
  }

  .nei_con {
    width: 250px;
    background: #fff;
    height: 270px;
    margin-top: -65px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .swipersx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .boy_left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 99;
  }

  .boy_left {
    width: 145px;
    height: 145px;
    margin: 0px;
    z-index: 99;
  }

  .appointment a {
    width: 150px;
    margin: 30px auto;
    background-color: #c00000;
    border: none;
    color: white;
    text-align: center;
    border-radius: 5px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    margin-bottom: 40px;
  }

  .appointment {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .squad_one a span {
    display: inline-block;
    text-align: center;
    font-size: 14px;
    line-height: 22.4px;
    color: rgb(51, 51, 51);
  }

  .squad_one a p {
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    margin: 5px auto;
  }

  .squad_one a {
    display: inline-block;
  }

  .bfa_bao img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #f2f2f2;
  }

  .bfa_bao {
    width: 150px;
    height: 150px;
    margin: auto;
  }

  .squad_one {
    width: 272px;
    height: auto;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .squad_con {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
  }

  .squad h2 {
    font-size: 42px;
    text-align: center;
    color: #000;
    margin-top: 50px;
  }

  .squad {
    width: 1200px;
    margin: auto;
  }

  .gost_img {
    margin-top: 25px;
  }

  .gost_img img {
    width: 100%;
  }

  .gost_img {
    width: 100%;
  }

  .gost_c {
    width: 1200px;
    margin: auto;
  }

  .gost_c h2 {
    font-size: 42px;
    text-align: center;
    color: #000;
    margin-top: 50px;
  }

  td {
    background: #f2dcdb;
  }

  .tables {
    margin-top: 25px;
  }

  .am-table-bordered {
    border: 1px solid #ddd;
    border-left: none;
  }

  .am-table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 40px;
  }

  table {
    max-width: 100%;
    background-color: transparent;
    empty-cells: show;
  }

  .interview-class-table thead {
    background-color: #c00000;
    color: white;
  }

  .interview-class-table thead tr th {
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #fff;
  }

  table > thead > tr > th {
    line-height: 1.6;
  }

  .am-table-bordered > thead + tbody > tr:first-child > td,
  .am-table-bordered > thead + tbody > tr:first-child > th {
    border-top: 1px solid #ddd;
    width: 30%;
  }

  .interview-class-table tbody tr td {
    vertical-align: middle;
    text-align: center;
    border: 2px solid #fff;
  }

  .am-table > tbody > tr > td,
  .am-table > tbody > tr > th,
  .am-table > tfoot > tr > td,
  .am-table > tfoot > tr > th,
  .am-table > thead > tr > td,
  .am-table > thead > tr > th {
    padding: 0.7rem;
    line-height: 1.6;
  }

  td,
  th {
    font-size: 16px;
  }

  .tables {
    width: 1200px;
    height: auto;
  }

  .setup h2 {
    font-size: 41px;
    line-height: 52px;
    color: #000;
    text-align: center;
  }

  .setup {
    width: 1200px;
    height: auto;
    margin: auto;
  }

  .guide_con {
    font-size: 16px;
    text-align: center;
    color: #333;
  }

  .penss_con {
    margin: auto;
    width: 60px;
    margin-top: 16px;
    margin-bottom: 10px;
  }

  .mian_zhi {
    width: 100%;
    background-color: #c00000;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: white;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 40px;
  }

  .guide_con {
    width: 192px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #fff;
  }

  .guide {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 90px;
  }

  .box_hid {
    justify-content: space-between;
    display: flex;
    margin-bottom: 16px;
  }

  .step_s:hover p {
    color: #fff;
  }

  .step_s p {
    font-size: 16px;
    text-align: center;
    color: #333;
  }

  .png_ff p:first-child {
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
  }

  .png_ff {
    width: 120px;
    margin: auto;
    margin-top: 15px;
  }

  .step_s:hover {
    background: #c00000;
  }

  .step_s {
    width: 192px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 15px;
    background: #fff;
  }

  .stes {
    color: #c00000;
    display: block;
    text-align: center;
    line-height: 1.2;
    font-size: 32px;
    font-weight: bold;
  }

  .step {
    font-weight: bolder;
    color: #cfcfcf;
    font-size: 28px;
    display: block;
    text-align: center;
    line-height: 1.2;
    margin: 15px auto;
  }

  .go_jj {
    font-size: 14px;
    width: 100px;
    line-height: 32px;
    height: 32px;
    color: white;
    background-color: #c00000;
    text-align: center;
    display: block;
    margin: auto;
    border-radius: 5px;
  }

  .getClass {
    padding: 17px 0;
    box-sizing: border-box;
    color: rgb(165, 165, 165);
    margin: 10px 10px 25px 10px;
    font-size: 14px;
    border-top: 1px solid rgb(165, 165, 165);
    border-bottom: 1px solid rgb(165, 165, 165);
    text-align: left;
    height: 120px;
  }

  .ponew {
    font-size: 14px;
    margin: 2px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mba_top .pones {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 2px;
    font-weight: 500;
    text-align: center;
  }

  .swpt_im {
    width: 100%;
    height: 140px;
  }

  .swpt_im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiperone .swiper-slide {
    height: auto;
    background: #fff;
    padding: 24px;
    box-sizing: border-box;
  }

  .swiperone {
    height: auto;
  }

  .am_container h5 {
    text-align: center;
    font-size: 16px;
    margin: 0 auto 15px auto;
    width: 630px;
    font-weight: 500;
    color: rgb(149, 149, 149);
  }

  .am_container h2 {
    margin: 0 auto 5px auto;
    font-size: 42px;
    margin-top: 50px;
    text-align: center;
    color: #000;
  }

  .am_container {
    width: 1200px;
    height: auto;
    margin: auto;
  }

  .banners img {
    width: 100%;
  }

  .banners {
    width: 100%;
    height: auto;
  }

  .ling_right ul li a:hover {
    color: #01752e;
    transition: color 500ms ease-in-out;
  }

  .phomne {
    margin-right: 12px;
  }

  .ling_right ul li {
    margin-right: 23px;
    font-size: 16px;
  }

  .ling_right ul li a {
    display: flex;
    align-items: center;
    transition: color 500ms ease-in-out;
  }

  .ling_right ul {
    align-items: center;
    display: flex;
  }

  .counseling_top {
    width: 1200px;
    height: 80px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  #box_bao {
    display: inline-block;
    height: 100%;
  }

  @media (max-width: 1250px) {
    .am_container {
      width: 90%;
    }

    .setup, .gost_c, .squad {
      width: 90%;
    }

    .tables, .appointment, .more_vnm {
      width: 100%;
    }
  }

  @media (max-width: 1000px) {
    .getClass p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    .guide_con {
      width: 120px;
    }

    .guide_con p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nei_con {
      height: 200px;
    }
  }

  @media (max-width: 750px) {
    .swiperone .swiper-slide {
      width: 100%;
    }

    .am_container h5 {
      width: 100%;
      text-align: center;
    }

    .am_container h2 {
      font-size: 22px;
    }

    .step_s, .guide_con {
      display: inline-block;
      width: calc((100% - 0px) / 3);
    }

    .box_hid, .guide {
      display: inline-block;
    }

    .guide_con {
      padding: 0px 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
  }

  @media (max-width: 550px) {
    .squad_one {
      display: inline-block;
      width: calc((100% - 0px) / 2);
    }

    .nei_con {
      width: 100%;
      height: auto;
    }

    .step_s, .guide_con {
      display: inline-block;
      width: calc((100% - 0px) / 2);
    }

    .bfa_bao {
      width: 70px;
      height: 70px;
    }

    .squad_one {
      width: calc((100% - 0px) / 2);
      padding: 5px;
      box-sizing: border-box;
    }

    .boy_left {
      width: 70px;
      height: 70px;
    }

    .swiper-button-next, .swiper-button-prev {
      background-size: 14px;
    }

    .swiper-button-prev, .swiper-button-next {
      margin-top: -22px !important;
    }

    .squad_con {
      display: inline-block;
    }

    .squad_one a p {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .squad_one a span {
      overflow: auto;
      white-space: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 44px;
    }

    .squad_one a {
      width: 100%;
    }

    .nei_con p {
      text-align: center;
    }

    .nei_con {
      height: 150px !important;
    }

    .nei_con p {
      font-size: 12px;
    }

    .nei_con p:first-child {
      margin-top: 30px;
    }
  }
</style>
